<template>
  <div>
    <!--1视图-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称">
      </el-table-column>
      <el-table-column
          prop="auth"
          label="权限标识符">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEdit(scope.row.id)">角色授权</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--          :default-expanded-keys="[6]"-->
<!--    menuData-->
    <el-dialog title="权限" :visible.sync="dialogFormVisible">
      <el-tree
          ref="tree"
          :data="forms"
          show-checkbox
          node-key="id"
          :default-checked-keys="menuData"
          :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedKeys()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "RoleView",
  data() {
    return {
      //2属性定义
      tableData:[],
      forms:[],
      menuData:[],
      dialogFormVisible:false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rid:'',
    }
  }, methods: {
    openEdit(id){
      this.rid=id
      this.menuData=[]
      //回显树形的数据
      this.axios.get("/menuservice/roleMenu/menuRoleList",{params:{id:this.rid}}).then(res=>{
        for (let i = 0; i < res.data.data.length; i++) {
          this.menuData.push(res.data.data[i].id)
        }
        console.log(this.menuData)
        // 树形结构
        this.axios.get("/menuservice/roleMenu/menuList").then(res=>{
          this.forms=[];
          for (let i = 0; i < res.data.data.length; i++) {
            let aaa=res.data.data[i];
            // console.log(aaa)
            if (res.data.data[i].children!=null){
              let sum=[]
              for (let o = 0; o < res.data.data[i].children.length; o++) {
                let a=res.data.data[i].children[o];
                sum.push({id: a.id,label:a.name});
              }
              // console.log(sum)
              this.forms.push({id: aaa.id,label:aaa.name,children:sum});
            }else {
              this.forms.push({id:aaa.id ,label:aaa.name,children:null});
            }
          }
          // console.log(this.forms);
        });
      });
      this.dialogFormVisible=true;
    },
    //3自定义方法
    list(){
      this.axios.post("/roleservice/role/list").then(res=>{
        this.tableData=res.data.data;
      })
    },
    getCheckedKeys(){
      let at=this.$refs.tree.getCheckedKeys();
      let nnu='';
      for (let i = 0; i < at.length; i++) {
        if (nnu==""){
          nnu+=at[i];
        }else {
          nnu+=","+at[i];
        }
      }
      this.axios.get("menuservice/roleMenu/addRoleMenu",{params:{id:this.rid,mid:nnu}}).then(res=>{
        alert(res.data.code)
        this.dialogFormVisible=false;
        location.replace("role")
      })
      // console.log(nnu)
      this.menuData=[];
    }
  }, created() {
    //4.钩子函数
    this.list();
  },mounted() {

  }
}
</script>

<style scoped>

</style>